<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <template>
              <div style="width:100%;">
                  <div style="float:left;width:50%">
                      <table style="font-size:12px" class="table1style">
                          <tr>
                              <td>检验仪器</td>
                              <td>
                                  <rm-ddl-instrument :appendtobody="true" @change="labinstrumentchange" v-model="labinstrumentval" width="260px"></rm-ddl-instrument>
                              </td>
                          </tr>
                      </table>
                  </div>
                  <div style="float:left;width:50%;">
                      <table style="float:right">
                          <tr>
                              <td>
                                  <el-button type="primary" icon="el-icon-search" @click="findList" v-has="'PINQUERY'">查询</el-button>
                              </td>
                              <td>
                                  <el-button @click="add" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
                              </td>
                              <td>
                                  <el-button @click="del" icon="el-icon-delete" v-has="'PMODIFY'">删除</el-button>
                              </td>
                              <td>
                                  <el-button @click="save" icon="el-icon-document">保存</el-button>
                              </td>
                              <td>
                                  <el-button @click="recordexport" icon="el-icon-upload2" v-has="'PEXPORT'">导出</el-button>
                              </td>
                          </tr>
                      </table>
                  </div>
              </div>
          </template>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <div class="middle-center" ref="xTableDiv" style="height:100%;">
                  <vxe-table :loading="loading" :data.sync="tableData" :row-class-name="rowClassName" @current-change="currentChangeEvent" border fit :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" @edit-actived="cellactive" @edit-closed="EditClose" height="auto" header-align="center" :keyboard-config="keyConfig" highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe :select-config="selectConfig">
                      <vxe-table-column type="index" title="NO." width="45"  header-align="center" align="center"></vxe-table-column>
                      <vxe-table-column field="alarmno" title="报警代号" width="150" :edit-render="{name:'input',autoselect:true}"></vxe-table-column>
                      <vxe-table-column field="allowrechk" title="允许审核" width="80" align="center">
                          <template v-slot="{row}">
                              <el-checkbox v-model="row.allowrechk" true-label="1" false-label="0"></el-checkbox>
                          </template>
                      </vxe-table-column>
                      <vxe-table-column field="alarmdesc" title="报警说明" width="600" :edit-render="{name:'input',autoselect:true}"></vxe-table-column>
                      <vxe-table-column field="showcolor" sortable title="报告项目仪器报警显示底色" width="180" show-overflow header-align="center" align="center">
                          <template v-slot="{ row }">
                              <div style="height: 25px">
                                  <el-color-picker v-model="row.showcolor"></el-color-picker>
                              </div>
                          </template>
                      </vxe-table-column>
                      <vxe-table-column field="instrid" title="仪器ID" v-if="false" width="100"></vxe-table-column>
                  </vxe-table>
              </div>
          </div>
      </div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span><span class="el-icon-info">确定删除报警代号为<b style="color:red">{{ message }}</b>的记录吗？</span></span>
          <span slot="footer" class="dialog-footer">
              <el-button @click="submitdel">确 定</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "LIS144",
  data() {
      return {
          labinstrumentval: "1",
          tableData: [],
          message: "",
          loading: false,
          dialogVisible: false,
          okFirstLoading: true,
          curselectrow: "",
          actionindex: 0,
          tempindex: 0,
          selectConfig: { tigger: "row" },
          keyConfig: {
              isArrow: true,
              isDel: true,
              isTab: true,
              isEdit: true
          }
      };
  },
  computed: {},
  created() {
      this.findList(); //初始化主列表
  },
  mounted() {},
  updated() {
      if (this.okFirstLoading) {
          let currentrow = "";
          if (this.actionindex != 0) {
              //新增，修改，删除
              if (this.actionindex == 3) {
                  //新增或删除
                  if (this.tempindex > 0) {
                      currentrow = this.$refs.xTable.getData(this.tempindex);
                  } else {
                      currentrow = this.$refs.xTable.getData(0);
                  }
              } else {
                  if (this.curselectrow && this.curselectrow != "") {
                      this.$nextTick(() => {
                          let row = this.curselectrow;
                          var alld = this.$refs.xTable.tableData;
                          for (var i = 0; i < alld.length; i++) {
                              if (alld[i].alarmno == row.alarmno) {
                                  this.tempindex = i;
                                  break;
                              }
                          }
                          currentrow = this.$refs.xTable.getData(this.tempindex);
                      });
                  } else {
                      currentrow = this.$refs.xTable.getData(0);
                  }
              }
          } else {
              //查询
              currentrow = this.$refs.xTable.getData(0);
              this.actionindex = 2;
              this.curselectrow = currentrow;
          }
          this.$nextTick(() => {
              if (currentrow) {
                  this.okFirstLoading = false;
                  this.$refs.xTable.setCurrentRow(currentrow);
                  this.message = currentrow.alarmno;
              }
          });
      }
  },
  methods: {
      findList() {
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS144",
                  method: "post",
                  data: {
                      action: "query",
                      instrid: this.labinstrumentval
                  }
              })
              .then(res => {
                  this.tableData = res.Data;
                  this.okFirstLoading = true;
                  this.loading = false;
              })
              .catch(e => {
                  console.log("error", e);
              });
      },
      labinstrumentchange(c, v) {
          this.labinstrumentval = c;
          this.actionindex = 0;
          this.findList();
      },
      currentChangeEvent({ row, $rowIndex }) {
          this.message = row.alarmno;
          this.actionindex = 2; //修改
          this.tempindex = $rowIndex;
          this.curselectrow = row;
      },
      add() {
          if (this.labinstrumentval == "") {
              this.$message({
                  message: "请先选择检验仪器后再新增",
                  type: "warning"
              });
          }
          let initdata = {
              alarmno: "",
              allowrechk: "0",
              alarmdesc: "",
              colorval :"#ffffff",
              instrid: Number(this.labinstrumentval)
          };
          this.$refs.xTable.insert(initdata);
          this.actionindex = 1; //增加
          this.chatlog();
          let rows = this.$refs.xTable.tableData;
          let selectrow = this.$refs.xTable.tableData[rows.length - 1];
          if (selectrow && selectrow != "") {
              this.$refs.xTable.setCurrentRow(selectrow);
              this.$refs.xTable.setActiveRow(selectrow, "alarmno");
          }
      },
      chatlog() {
          this.$nextTick(() => {
              var alldataLen = this.$refs.xTable.tableData.length;
              let L = this.$refs.xTable.getTableData().fullData[alldataLen - 1];
              this.$refs.xTable.scrollToRow(L);
          });
      },
      del() {
          this.dialogVisible = true;
      },
      submitdel() {
          let delrow = this.$refs.xTable.getCurrentRow();
          if (delrow) {
              var alld = this.$refs.xTable.tableData;
              var rowindex = alld.indexOf(delrow);
              this.$refs.xTable.remove(delrow);
              this.actionindex = 3; //删除
              let havedata = this.$refs.xTable.tableData;
              if (havedata.length > 0) {
                  if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                  this.tempindex = rowindex;
                  let selectrow = havedata[rowindex];
                  this.$refs.xTable.setCurrentRow(selectrow);
                  this.message = selectrow.alarmno;
              }
          } else {
              this.$message({
                  message: "请选择要删除的记录！",
                  type: "warning"
              });
          }
          this.dialogVisible = false;
      },
      save() {
          let tabledata = this.$refs.xTable.getRecordset();
          if (tabledata.insertRecords.length > 0) {
              this.curselectrow = tabledata.insertRecords[0];
              //console.log("22", tabledata.insertRecords);
          }
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS144",
                  method: "post",
                  data: {
                      action: "save",
                      urec: tabledata
                  }
              })
              .then(response => {
                  if (response.errcode == "1") {
                      this.$message({
                          message: "操作成功！",
                          type: "success"
                      });
                      this.findList();
                  } else {
                      this.$message({
                          message: "保存失败！" + response.errmsg,
                          type: "warning"
                      });
                  }
              });
      },
      recordexport() {
          let options = {
              filename: "  LIS144 仪器报警自动审核设定"
          };
          this.$refs.xTable.exportCsv(options);
      },
      cellactive({ row, column, rowIndex }) {
          row.instrid = Number(this.labinstrumentval);
          if (row.allowrechk == null) {
              row.allowrechk = "0";
          }
          this.message = row.alarmno;
          this.$refs.xTable.setCurrentRow(row);
          this.actionindex = 2; //修改
          this.tempindex = this.$refs.xTable.getRowIndex(row);
      },
      EditClose({ row, column, rowIndex }) {
          if (column.property == "alarmno") {
              this.$refs.xTable.$refs.tableBody.$children[rowIndex].$el.focus();
          }
      },
      rowClassName({ row, rowIndex }) {
          let isDirty = this.$refs.xTable.hasRowChange(row);
          if (isDirty) {
              return "row-modify";
          }
          if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
      }
  }
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
.table1style tr td {
  padding: 0px 2px 0px 5px;
}
::v-deep tr.vxe-body--row.row-modify {
  color: blue !important;
}
</style>
